<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. -->
<!-- See LICENSE in the project root for license information -->

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>draw.io</title>
    <!-- This office.js library holds the JavaScript API for Office. -->
    <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>

    <!-- The following two files hold the Office UI Fabric styles and components. -->
	<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
	<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
    <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
    
    <link href="app.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="/js/viewer.min.js"></script>
    <script src="../new_common/cac.js" type="text/javascript"></script>
  	<script type="text/javascript" src="../onedrive_common/ac.js"></script>
  	<script type="text/javascript" src="function-file/function-file.js"></script>
  	<script type="text/javascript" src="js/drive.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>

<body>

	 <div id="connectContainer">

        <div id="loading" style="width:100%;height: 0px"></div>

	    <div class="welcome-body" style="display:none"> 
		    <div class="ms-bgColor-neutralLight welcome">
		        <div><img src="/images/draw.io-logo.svg" height="32px"></div>
		        <div class="ms-font-l" data-i18n="officeMainHeader">Adds draw.io diagrams to your document.</div>
		    </div>
		    
	        <p class="ms-font-xs welcome-intro" data-i18n="officeStepsHeader">This add-in performs the following steps:</p>
	       
	        <ul class="ms-List ordered-list">
	            <li class="ms-ListItem">
	                <span class="ms-ListItem-primaryText">1</span>
	                <span class="ms-ListItem-secondaryText" data-i18n="officeStep1">Connects to Microsoft OneDrive, Google Drive, or your device.</span>
	                <div class="clearfix"></div>
	            </li>
	            <li class="ms-ListItem">
	                <span class="ms-ListItem-primaryText">2</span>
	                <span class="ms-ListItem-secondaryText" data-i18n="officeStep2">Select a draw.io diagram.</span>
	                <div class="clearfix"></div>
	            </li>
	            <li class="ms-ListItem">
	                <span class="ms-ListItem-primaryText">3</span>
	                <span class="ms-ListItem-secondaryText" data-i18n="officeStep3">Insert the diagram into the document.</span>
	                <div class="clearfix"></div>
	            </li>
	        </ul>
	        <div style="height:160px"></div>
	    </div>
	</div>
	
	<div id="waitContainer" style="display:none">
	    <div class="ms-Spinner"></div>
	    <p class="ms-font-l ms-fontColor-themePrimary indentFromPaneEdge centeredText" data-i18n="officePopupInfo">
	    	Please complete the process in the pop-up window.
	    </p>
	</div>
	
	<div id="selectFileContainer" style="display:none" class="allAreaContainer">
		<div id="backLnk"><span class="backLnk">&lt; <span data-i18n="back">Back</span></span></div>
		<div id="signOutLnk" class="signOutLnk" data-i18n="signout">Sign Out</div>
		<div class="ms-ContextualMenuExample" style="display: none">
		  <div class="menuBtn" >
		    <div class="menuBar"></div>
			<div class="menuBar"></div>
			<div class="menuBar"></div>
		  </div>
		  <ul class="ms-ContextualMenu is-hidden">
		    <li class="ms-ContextualMenu-item">
		      <a class="ms-ContextualMenu-link" id="updateSel" tabindex="1">Update Selected</a> 
		    </li>
		    <li class="ms-ContextualMenu-item">
		      <a class="ms-ContextualMenu-link" id="editSel" tabindex="1">Edit Selected</a> 
		    </li>
		    <li class="ms-ContextualMenu-item">
		      <a class="ms-ContextualMenu-link" id="manualUpdate" tabindex="1">Manual Update</a> 
		    </li>
		  </ul>
		</div>
		<div id="filePickerTitle" class="ms-font-l ms-fontColor-themePrimary centeredText" style="padding-top:0px;">
			<div data-i18n="officeSelDiag" style="display: inline-block;">Select draw.io Diagram:</div>
		</div>
		<div id="filePickerWithPreview">
			<div class="odCatsList">
				<div class="odCatsListLbl">OneDrive</div>
				<div id="odFiles" class="odCatListTitle odCatSelected" data-i18n="files">Files</div>
				<div id="odRecent" class="odCatListTitle" data-i18n="recent">Recent</div>
				<div id="odShared" class="odCatListTitle" data-i18n="shared">Shared</div>
				<div id="odSharepoint" class="odCatListTitle" data-i18n="sharepoint">Sharepoint</div>
			</div>
			<div class="odFilesSec">
				<div class="searchBar"  style="display:none">
					<input type="search" id="odSearchBox" placeholder="Search">
				</div>
				<div class="odFilesBreadcrumb">
				</div>
				<div id="refreshOD" class="odRefreshButton">
					<img src="https://www.draw.io/images/update32.png" width="16" height="16" title="Refresh" border="0" data-i18n-title="refresh"/>
				</div>
				<div class="odFilesList">
				</div>
			</div>
	        <div style="text-align: center;" id="preview">
	        </div>
		</div>
    	 <div class="bottomBtns">
            <button id="addODFile" class="ms-Button ms-Button--primary" style="margin-top: 5px"><span class="ms-Button-label" data-i18n="insert">Insert</span></button>
         	<button style="display: none" id="editODFile" class="ms-Button ms-Button smallBtn"><span class="ms-Button-label" data-i18n="edit">Edit</span></button>
         	<button style="display: none" id="newFile" class="ms-Button ms-Button smallBtn"><span class="ms-Button-label" data-i18n="new">New</span></button>
         	<a class="ms-Button smallBtn" id="editODFile2" href="https://www.draw.io/?mode=onedrive" target="_blank"><span class="ms-Button-label" data-i18n="edit">Edit</span></a>
         	<a class="ms-Button smallBtn" id="newFile2" href="https://www.draw.io/?mode=onedrive" target="_blank"><span class="ms-Button-label" data-i18n="new">New</span></a>
        </div>
    </div>
    
    <div id="insertErrorContainer" style="display:none"  class="allAreaContainer">
	    <div id="inserErrMsg">
		    <div class="ms-MessageBar ms-MessageBar--error">
			  <div class="ms-MessageBar-content">
			    <div class="ms-MessageBar-icon">
			      <i class="ms-Icon ms-Icon--ErrorBadge"></i>
			    </div>
			    <div class="ms-MessageBar-text" style="font-size: 15px" data-i18n="officeCopyImgErrMsg">
			    	An error prevented draw.io from adding the image directly to the document. This is due to some limitations in the host application.
	         		Please manually copy the image then paste it to the document.
			    </div>
			  </div>
			</div>
		    <p data-i18n="officeCopyImgInst">
		    	Instructions: Right-click the image below. Select "Copy image" from the context menu. Then, in the document, right-click and select "Paste" from the context menu. 
		    </p>
	    </div>
	    <div id="imgContainer">
	    	<img id="manualCopyImg">
	    </div>
	    <div id="insertErrorBtns" class="bottomBtns">
	    	<button id="backBtn" class="ms-Button ms-Button--primary" style="margin-top: 5px"><span class="ms-Button-label" data-i18n="cancel">Cancel</span></button>
	    </div>
	</div>
    
    <div id="manualUpdateContainer" style="display:none"  class="allAreaContainer">
   		<p data-i18n="officeManualUpdateInst">
	    	Instructions: Copy draw.io diagram from the document. Then, in the box below, right-click and select "Paste" from the context menu.
	    </p>
		<div id="editableDiv" contenteditable="true" data-i18n="pasteDiagram">Paste draw.io diagram here</div>
		<div id="manualUpdateBtns" class="bottomBtns">
	    	<button id="backBtn2" class="ms-Button ms-Button--primary" style="margin-top: 5px"><span class="ms-Button-label" data-i18n="cancel">Cancel</span></button>
	    </div>
    </div>

	<footer id="footerButton" class="footer ms-bgColor-neutralLight" style="display:none">
	    <div class="container">
	        <p align="center">
	            <button id="loginO365PopupButton" class="serviceBtn ms-Button ms-Button--primary"><span class="ms-Button-label" data-i18n="pickODFile">Pick OneDrive File</span></button>
	        </p>
	        <p align="center">
	            <button id="driveBtn" class="serviceBtn ms-Button ms-Button--primary"><span class="ms-Button-label" data-i18n="pickGDriveFile">Pick Google Drive File</span></button>
	        </p>
	        <p align="center">
	            <button id="deviceBtn" class="serviceBtn ms-Button ms-Button--primary"><span class="ms-Button-label" data-i18n="pickDeviceFile">Pick Device File</span></button>
	        </p>
	    </div>
	</footer>
	<div id="notification-message">
	   <div class="padding">
	       <div id="notification-message-close"></div>
	       <div id="notification-message-header"></div>
	       <div id="notification-message-body"></div>
	   </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>